<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加爱好</title>
    <style>
    li{
        margin-bottom:20px;
    }
    </style>
</head>
<body>
     <span>个人爱好:</span>
     <input type="text"/>
     <button id="addBtn" onclick="addHobby(this)">添加</button>
     <br/>
     <ol></ol>
     <br/>
     <button onclick="subimtBtn()">确定</button>
     <p></p>

     <script>
     var HobbyLength = 0;
     function addHobby(btn) {
        var ol = document.getElementsByTagName('ol')[0];
        ol.appendChild(getElement());
        HobbyLength = ol.childNodes.length;

        if(HobbyLength ==4){
            btn.disabled='true';
        }
                
       
     }

     function subimtBtn() {
        var inp = document.getElementsByTagName('input');
        var i = 0,len=inp.length,hobArr =[];
        for(i;i<len;i++) {
            hobArr.push(inp[i].value);
    }
        document.getElementsByTagName('p')[0].innerHTML='你的爱好是:'+hobArr.join('-');
     }

    function removeBtn(btn) {
        document.getElementsByTagName('ol')[0].removeChild(btn.parentNode);
        document.getElementById('addBtn').disabled='';
    }


     function getElement(){
        var li = document.createElement('li');
        var inp =document.createElement('input');
        var btn = document.createElement('button');
        var btnTxt = document.createTextNode('删除');
        btn.setAttribute('onclick','removeBtn(this)')
        btn.appendChild(btnTxt);
        li.appendChild(inp);
        li.appendChild(btn);
        return li;
     }

     getElement();
     </script>
</body>
</html>